<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>资源文件上传</title>
    <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="css/shangchuan.css">
    <script src="../../layui/layui.js"></script>
</head>

<body>
    <div class="juzhong">
        <div class="dashed">
            <span class="yi">将excel文件拖拽到此处或</span>
            <button type="button" class="layui-btn layui-btn-normal" id="test1"><span class="er">点击上传</span></button>
        </div>
    </div>
    <div class="layui-footer">
        <button type="button" class="layui-btn" id="btn1">取消上传</button>
        <table id="demo" lay-filter="test"></table>
    </div>

</body>
<script>
    layui.use('upload', function() {
        var upload = layui.upload;
        //执行实例
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
                ,
            url: '/upload/' //上传接口
                ,
            done: function(res) {
                //上传完毕回调
            },
            error: function() {
                //请求异常回调
            }
        });
    });
</script>
<script>
    layui.use("layer", function() {
        var layer = layui.layer;
        var btn = document.getElementById('btn1');
        btn.onclick = function() {
            layer.open({
                title: '提示',
                type: '2',
                area: ['420px', '180px'],
                content: '<div class="neirong">如果数据存在大量重复,或者之前上传过,建议你取消<br>上传数据</div>',
                btn: ['取消', '确定'],
                shade: [0.5, '#000']
            })
        };
    });
</script>

<script>
    layui.use('table', function() {
        var table = layui.table;
        //第一个实例
        table.render({
            elem: '#demo',
            url: '/demo/table/user/', //数据接口
            page: true, //开启分页
            cols: [
                [ //表头
                    {
                        field: 'number',
                        title: '序号',
                        width: '6%',
                        align: 'center'
                    }, {
                        field: 'zichanmingcheng',
                        title: '经营性资产名字',
                        width: '14%',
                        align: 'center'
                    }, {
                        field: 'suoshucun',
                        title: '所属村',
                        width: '6%',
                        align: 'center'
                    }, {
                        field: 'suoshuzu',
                        title: '所属组',
                        width: '6%',
                        align: 'center'
                    }, {
                        field: 'zichanleixing',
                        title: '资产类型',
                        width: '8%',
                        align: 'center'
                    }, {
                        field: 'chengzufang',
                        title: '承租方',
                        width: '8%',
                        align: 'center'
                    }, {
                        field: 'hetong',
                        title: '是否签订合同',
                        width: '9%',
                        align: 'center'
                    }, {
                        field: 'qixian',
                        title: '合同期限',
                        width: '9%',
                        align: 'center'
                    }, {
                        field: 'qingkuang',
                        title: '支付情况',
                        width: '8%',
                        align: 'center'
                    }, {
                        field: 'hetongzhuangtai',
                        title: '合同状态',
                        width: '8%',
                        align: 'center'
                    }, {
                        field: 'jinge',
                        title: '合同金额',
                        width: '8%',
                        align: 'center'
                    }, {
                        field: 'beizhu',
                        title: '备注',
                        width: '5%',
                        align: 'center'
                    }, {
                        field: 'caozuo',
                        title: '操作',
                        width: '5%',
                        align: 'center'
                    }
                ]
            ]
        });
    });
</script>

</html>